<!--
* description: 备件清单
* author:wangjuan
* createdDate:2020-3-12
-->
<template>
  <section class="editSetInEdit">
    <el-dialog
      v-dialogDrag
      :title="titleName"
      :visible="popupsVisible"
      :append-to-body="true"
      width="70%"
      :close-on-click-modal="false"
      @close="closeEdit"
      @open="open"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />
      <div class="app-container app-container-table">
        <one-table-template
          ref="multipleTable"
          :key="oneTableKey"
          :dynamic-components="tableComponents"
          :dynamic-buttons="tableButtons"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-more-btn="true"
          :dynamic-is-show-select="true"
          :dynamic-is-init-table="true"
          :callback-obj="callbackObj"
          :dynamic-table-defult-height="300"
        />
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import { formMixins } from "@/components/mixins/formMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/se/coreManagement";

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import("@/components/dialogHeader"),
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {
    // 弹出是否显示
    popupsVisible: { type: Boolean, default: false },
    dataForForm: {
      type: Object,
      default: function () {
        return {};
      },
      isDialogVisible: {
        type: Boolean,
        default: false,
      },
      popupsVisible: { type: Boolean, default: false },
      // 已经选择过的数据
      chosenList: { type: Array, default: () => [] },
    },
  },

  data() {
    const viewPageCode = "save-edit";
    return {
      apiConfig: api.partsInfor,
      titleName: "备件清单",
      // selectData: {},

      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          clickEvent: () => this.queryTable(1),
          text: this.$t("sys.button.query"), // 查询
          position: "right",
          fuzzySearch: true,
        },
        {
          compKey: "btnKey2",
          size: "small",
          clickEvent: () => this.reset(),
          text: this.$t("sys.button.reset"),
          position: "right", // 重置
        },
        {
          compKey: "btnKey3",
          size: "small",
          clickEvent: () => this.select(),
          text: "选择",
          disabled: true,
          position: "right", // 选择
        },
      ],

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
              {
                compKey: "compKey1",
                labelName: "索赔单号：",
                codeField: "preAuthorCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                span: 8,
              },
              {
                compKey: "compKey2",
                labelName: "备件编码：",
                codeField: "partCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                span: 8,
              },
              {
                compKey: "compKey3",
                labelName: "备件名称：",
                codeField: "partName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                span: 8,
              },
            ],

      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "realDate",
                label: "主键ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "returnCode",
                label: "主键ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "returnshipInfoId",
                label: "主键ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "coreBarcode",
                label: "旧件条码号",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "returnshipInfoId",
                label: "旧件ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                compKey: "compKey1",
                prop: "preAuthorCode",
                label: "索赔单号",
                component: () => import("@/components/org/commonInput"),
                align: "center",
                type: "inputText",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey2",
                prop: "partCode",
                label: "备件编码",
                align: "center",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey3",
                prop: "partName",
                label: "备件名称",
                align: "center",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                span: 8,
                isMust: true,
              },
            ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          preAuthorCode: "",
          partCode: "",
          partName: "",
          coreBarcode: "",
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),

      // 单表格模版页面组件回调事件
      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.selectData = selection;
          this.handleSelectionChange(selection);
        },
      },
    };
  },

  methods: {
    open() {
      this.queryTable(1);
    },

    // 关闭弹窗
    closeEdit(type) {
      this.$emit("closeInEdit", type);
    },

    select() {
      this.$emit("returnTimeData", this.selectData);
      this.closeEdit();
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.tableButtons.filter((o) => o.disabled !== undefined);
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0;
        btns.forEach((item) => {
          item.disabled = !isCheck;
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
</style>
